import { Button } from 'antd';
import type React from 'react';
import { useRef } from 'react';
import {
  attachRoutes,
  detachRoutes,
  getRoutes,
} from '@/components/MapView/Mapless/mana/routes';
import styles from '../../index.module.less';
import type { TestControlProps } from '../types';

const Index: React.FC<TestControlProps> = ({ maplessRef }) => {
  const onDrawRoutes = () => {
    const rMan = attachRoutes(maplessRef.current, 'rm1');
    rMan?.drawRoutes([
      {
        id: 'route1',
        route: [
          [113.264, 23.129],
          [113.266, 23.131],
          [113.268, 23.13],
        ],
        color: '#ff0000',
        thickness: 2,
        selected: true,
      },
      {
        id: 'route2',
        route: [
          [113.27, 23.132],
          [113.272, 23.133],
          [113.274, 23.131],
        ],
        color: '#00ff00',
        thickness: 3,
        visible: false,
      },
    ]);

    //     maplessRef.current?.loadSvg(`
    // <svg t="1751254974723" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="846" width="200" height="200">
    //   <path d="M926.7 480.8C926.7 249.5 739.2 62 507.9 62S89.1 249.5 89.1 480.8c0 228 182.1 413.4 408.8 418.7 12.7 36.3 47.2 62.4 87.8 62.4 51.4 0 93.1-41.7 93.1-93.1 0-1.8-0.2-3.7-0.3-5.5 146.3-65.3 248.2-212 248.2-382.6z m-264.6 335c-16.8-24.2-44.7-40-76.4-40-44.7 0-82 31.5-91 73.5C297.1 842.4 139 680.1 139 480.8 139 277.1 304.1 112 507.8 112c203.7 0 368.8 165.1 368.8 368.8 0 148.6-87.9 276.6-214.6 335z" p-id="847"></path>
    // </svg>`);
  };

  const timerRef = useRef<ReturnType<typeof setInterval>>(undefined);
  const lastx = useRef<number>(0);
  const lasty = useRef<number>(0);

  const onStartUpdateRoute = () => {
    timerRef.current = setInterval(() => {
      const rMan = getRoutes(maplessRef.current, 'rm1');
      const rand1 = Math.random() * 0.01;
      const rand2 = Math.random() * 0.01;
      lastx.current = 113.264 + rand1;
      lasty.current = 23.129 + rand2;
      rMan?.updateRoutes([
        {
          id: 'route1',
          route: [[lastx.current, lasty.current]],
        },
      ]);
    }, 1000);
  };

  const onStopUpdateRoute = () => {
    clearInterval(timerRef.current);
  };

  const onShowRoute = () => {
    const rMan = getRoutes(maplessRef.current, 'rm1');
    rMan?.setVisible(!rMan.IsVisible);
  };

  const onClearRoutes = () => {
    detachRoutes(maplessRef.current, 'rm1');
  };

  return (
    <div className={styles.test}>
      <Button type="primary" onClick={onDrawRoutes}>
        绘制路线
      </Button>
      <Button type="primary" onClick={onStartUpdateRoute}>
        开始更新路线
      </Button>
      <Button type="primary" onClick={onStopUpdateRoute}>
        停止更新路线
      </Button>
      <Button type="primary" onClick={onShowRoute}>
        显示/隐藏
      </Button>
      <Button type="primary" onClick={onClearRoutes}>
        清除路线
      </Button>
    </div>
  );
};

export default Index;
